<template>
  <div>
    <show1 />
    <show2 />
    <div class="rui-luck-draw">
      <div class="rui-luck-content">
        <div class="rui-luck-box">
          <div class="rui-luck-prize" prize="1">
            <img src="../assets/images/img1.png" alt="" />
          </div>
          <div class="rui-luck-prize" prize="2">
            <img src="../assets/images/img2.png" alt="" />
          </div>
          <div class="rui-luck-prize" prize="3">
            <img src="../assets/images/img5.png" alt="" />
          </div>
          <div class="rui-luck-prize" prize="4">
            <img src="../assets/images/img4.png" alt="" />
          </div>
          <div class="rui-pointer" @click="startRotate"></div>
          <div class="rui-luck-prize" prize="5">
            <img src="../assets/images/img3.png" alt="" />
          </div>
          <div class="rui-luck-prize" prize="6">
            <img src="../assets/images/img6.png" alt="" />
          </div>
          <div class="rui-luck-prize" prize="7">
            <img src="../assets/images/img7.png" alt="" />
          </div>
          <div class="rui-luck-prize" prize="8">
            <img src="../assets/images/img8.png" alt="" />
          </div>
        </div>
      </div>
      <div class="right_content">
        <div class="show">
          <show3 />
        </div>
        <el-button
          style="
            width: 50%;
            height: 10%;
            font-size: 20px;
            margin-left: 8%;
            margin-top: 10%;
          "
          type="success"
          round
          size="medium"
          @click="run"
          >开始抽奖</el-button
        >
        <el-select @change="getLabel" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import show1 from "./show1.vue";
import show2 from "./show2.vue";
import show3 from "./show3.vue";
export default {
  name: "Home",
  components: { show1, show2, show3 },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: 1,
        },
        {
          value: "选项2",
          label: 2,
        },
        {
          value: "选项3",
          label: 3,
        },
        {
          value: "选项4",
          label: 4,
        },
        {
          value: "选项5",
          label: 5,
        },
      ],
      value: "",
      number: 0,
      number1: 0,
      index: "",
      shopList: [],
      length: 0,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.$store.dispatch("getList");
      setTimeout(() => {
        for (var i = 0; i < this.luckArr.length; i++) {
          this.shopList.push(this.luckArr[i].commodityName);
        }
      }, 500);
    });
  },
  methods: {
    startRotate(elem) {
      this.$store.dispatch("getShop");
      var _this = this;
      this.$nextTick(() => {
        setTimeout(() => {
          luck._init({
            rotateId: ".rui-luck-prize",
            activeClass: "rui-active",
            luckNumber: _this.shopIndex.number,
            typeNumber: 8,
            time: 3000,
            type: "prize",
            circleNumber: 10,
            success: function (res) {
              console.log(res.luckNumber);
              console.log(_this.shopList[res.luckNumber]);
              alert(_this.shopList[res.luckNumber]);
            },
          });
        }, 1000);
      });
    },
    getLabel(value) {
      let opt = {};
      opt = this.options.find((item) => {
        return item.value === value;
      });
      this.number1 = opt.label;
    },
    run() {
      this.$store.dispatch("getPeople2", this.number1);
      this.$nextTick(function () {
        setTimeout(() => {
        let routerData = this.$router.resolve({
          name: "result",
          query: {
            people: this.people2,
          },
        });
        window.open(routerData.href, "_blank");
      }, 500);
      })
    },
  },
  computed: {
    ...mapState({
      luckArr: (state) => state.one.goodInfo,
    }),

    ...mapState({
      shopIndex: (state) => state.one.shopName,
    }),
    ...mapState({
      people2: (state) => state.one.people2,
    }),
  },
};
</script>

<style>
body,
p {
  margin: 0;
}
.rui-luck-draw {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.rui-luck-box {
  width: 100%;
  height: 100%;
}

.rui-luck-box div {
  width: 24%;
  height: 22%;
  text-align: center;
  box-sizing: border-box;
  /* border: 3px solid #ddd; */
  border-radius: 10px;
  font-size: 30px;
  position: absolute;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
.rui-luck-box div img {
  width: 100%;
  height: 100%;
}
.rui-luck-box div[prize="1"] {
  top: 12%;
  left: 12%;
  transform: translate(0, 0);
}

.rui-luck-box div[prize="2"] {
  top: 12%;
  left: 51%;
  transform: translate(-50%, 0);
}

.rui-luck-box div[prize="3"] {
  top: 12%;
  right: 12%;
  transform: translate(0, 0);
}

.rui-luck-box div[prize="4"] {
  top: 50%;
  right: 12%;
  transform: translate(0, -50%);
}

.rui-luck-box div[prize="5"] {
  bottom: 15%;
  right: 12%;
  transform: translate(0, 0);
}

.rui-luck-box div[prize="6"] {
  bottom: 14%;
  left: 50%;
  transform: translate(-50%, 0);
}

.rui-luck-box div[prize="7"] {
  bottom: 15%;
  left: 12%;
  transform: translate(0, 0);
}

.rui-luck-box div[prize="8"] {
  top: 50%;
  left: 12%;
  transform: translate(0, -50%);
}

.rui-luck-box div.rui-active {
  box-shadow: 0px 0px 50px inset red;
}

.rui-pointer {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none !important;
}
.rui-luck-name {
  font-size: 16px;
  text-align: left;
  height: 30px;
  line-height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.rui-luck-name a {
  text-decoration: none;
  color: #777;
  padding: 0 20px;
}
.rui-luck-content {
  background: url("../assets/images/chou-bg.png") no-repeat center center/100%
    100%;
  width: 80vw;
  height: 80vw;
  max-width: 600px;
  max-height: 600px;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  padding: 10vw;
}
.right_content {
  width: 80vw;
  height: 80vw;
  max-width: 800px;
  max-height: 800px;
  position: absolute;
  top: 18%;
  right: 10%;
}
.show {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: #ccc;
  width: 100%;
  height: 100%;
}
</style>
